<template>
	<div class="FirstPage">
	
		<el-container class="el-page">
		  <div class="el-left">
			  <div class="left_head">
				    <div class="left_select">
						<el-row style="margin-top: 2%;">
							 <el-col :span="24">
							  <div>
							     <span style="font-size: 15px;float: left;">时间周期：</span>	
							  </div>
							 </el-col>
						</el-row>
				        <el-row style="margin-top: 2%;">
				          <el-col :span="16">
				       	   <div>

				       	     

								  
								  				 <el-date-picker
								                        v-model="timePeriod"
								                        @change="setWeekAndYear"
														class="datePicker"
								                        type="week"
								                        format="yyyy 第 WW 周"
								                        placeholder="请选择周次">
								                    </el-date-picker>
								
				       	   </div>
				       	   
				          </el-col>
				        	<el-col :span="4">
				        			<el-button type="primary"  style="float: left;" @click="search()">搜索</el-button>
				       			
				        	</el-col>		  				    
				         			  
				       </el-row> 
				    </div>
			  </div>
			  <div class="left_middle1">
				<div class="left_middle_main">
			  		<el-card shadow="never">
			  		    <el-row>
			  		        <el-col :span="8">
								<div style="margin-top: 15%;font-size: 40px;color: 	#00BBFF;">
									<i class="el-icon-s-data"></i>
								</div>
						    </el-col>
			  		        <el-col :span="16">
								<div class="alarmNum">
									{{this.alarmNum}}
								</div>
								<br/>
								<div class="alarmLabel">
									二级告警数
								</div>
						    </el-col>
			  		    </el-row>
					</el-card>		
				</div>
			  </div>
			  <div class="left_middle2">
			  	<div class="left_middle_main">
			  		<el-card shadow="never">
			  		   <el-row>
			  		       <el-col :span="8">
			  		   		<div style="margin-top: 15%;font-size: 40px;color: #FFBB00;">
			  		   			<i class="el-icon-s-promotion"></i>
			  		   		</div>
			  		       </el-col>
			  		       <el-col :span="16">
			  		   		<div class="alarmNum">
			  		   			{{this.warningNum}}
			  		   		</div>
							<br/>
			  		   		<div class="alarmLabel">
			  		   			一级告警数
			  		   		</div>
			  		       </el-col>
			  		   </el-row>
					</el-card>		
			    </div>
			  </div>

		  </div>
		  <el-main class="el-middle">
			  <div class="middle_head">
				     <center>
					  <el-card shadow="never"  style="width: 90%;">
						  <div class="middle_head_main">
					      <el-row >
							<el-col :span="12">
					      		<div class="alarmNum">
					      			{{this.AlarmSum}}
					      		</div>					  	
								<br/>
					      		<div class="alarmLabel">
					      			总报警数
					      		</div>
							</el-col>
					        <el-col :span="12">
					      		<div class="alarmNum">
					      			{{this.AlarmSumInDate}}
					      		</div>
								<br/>
					      		<div class="alarmLabel">
					      			时间周期内报警总数
					      		</div>
					        </el-col>
					      </el-row>
						  </div>
					  </el-card>	
					  </center>
				  </div>
				  <div class="middle_bottom">
				  	
				  	<div class="middle_bottom_main">
				  		<div class="subTitle">
				  			报 警 频 率 排 行
				  		</div>
							<ve-histogram :data="frequenceData"  :legend-visible="false"></ve-histogram>	
				  	</div>
				  </div>				  
			  
		  </el-main>
		  <el-main class="el-right">
			<div class="right_head">
					<el-table
					    :data="tableData"
					    border
					    style="width: 100%,height:80%">
					    <el-table-column
					      prop="compareType"
					      label="比较类型"
					      >
					    </el-table-column>
					    <el-table-column
					      prop="level1"
					      label="二级告警"
					     >
					    </el-table-column>
					    <el-table-column
					      prop="level2"
					      label="一级告警">
					    </el-table-column>

					</el-table>
			</div>
			<div class="right_bottom">
				
				<div class="right_bottom_main">
					<div class="subTitle">
						报 警 趋 势 分 析
					</div>
					       <ve-line :data="trendData"></ve-line>

					
				</div>
			</div>
			  
			  
		  </el-main>
		</el-container>		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				        trendData:'',
				        frequenceData:'',
						year:'',//年 字符串 2021
						week:'',//周 字符串 3
						timePeriod: '',
						
					  frequenceColumnsList: [ "descriptor","count"],
					  frequenceList: [
						{"descriptor": '热泵出水口故障', "count": 176 },
						{"descriptor": '烟气进气压力', "count": 131 },
						{"descriptor": '低压汽包', "count": 116 },
						{"descriptor": '高压汽包', "count": 76 }
					  ],


						trendList:[
										{ week: '周一', "一级": 112, "二级":300},
										{"二级":121,  week: '周二',  "一级": 231 },
										{  week: '周三',  "一级": 587, "二级":122},
										{  week: '周四',  "二级": 1123, "一级":379},
										{ week: '周五', "二级": 214, "一级":556},
										{  week: '周六',  "二级": 32, "一级":77},
										{  week: '周日',  "一级": 682, "二级":99}
									],
						trendColumnsList:["week", "一级", "二级"], 						


						           
						
						tableData: [{
							compareType: '同比',
							level1: '+10%',
							level2: '+26%',
							level3: '-76%'
						  }, {
							compareType: '环比',
							level1: '+60%',
							level2: '+20%',
							level3: '-10%'
						  }],
						  warningNum:221,
						  alarmNum:190,
						  AlarmSum:4675,
						  AlarmSumInDate:823
				
			}
		},
		created() {
			 this.timePeriod=new Date();
			 this.trendData = {
			              columns: this.trendColumnsList,
			              rows: this.trendList
			          }    
			 this.frequenceData= {
			              columns: this.frequenceColumnsList,
			              rows: this.frequenceList
			          }    
		},
		
		methods: {

			setWeekAndYear(){
				var moment = require("moment");
				//注意，当返回值是中国标准时间的格式时使用moment.js的时候一定要加上.utcOffset(480)，用来转换时区
				this.week= moment(this.timePeriod).utcOffset(480).format("W")
				console.log(this.week)  
				this.$emit('transfertimePeriod',this.week)
				this.year=moment(this.timePeriod).utcOffset(480).format("yyyy")
				console.log(this.year)  
			  },
			
			search(){
				//柱状图
				this.axios.post('/XX/sumTagByWeek',{
									year:parseInt(this.year),
									week:parseInt(this.week)
				 }).then(r=>{
								  this.frequenceList=r.data;
								  this.frequenceData= {
								               columns: this.frequenceColumnsList,
								               rows: this.frequenceList
								           }    
								  
				});
				
				//折线图
				this.axios.post('/XX/sumClassByDay',{
									year:parseInt(this.year),
									week:parseInt(this.week)
				 }).then(r=>{
								  this.trendList=r.data;
								  this.trendData= {
								               columns: this.trendColumnsList,
								               rows: this.trendList
								           }    
								  
				});
				
				//
				
				
							 
			},
			
	
	
		}
	}
</script>

<style lang="less">
	.FirstPage{
		height: 100%;
		width:100%;
	.datePicker{
		width:80%;
		float: left;
	}
	.el-page{
		height:100%
	}
	  .el-left{
	    //background-color: #B3C0D1;
		height:100%;
	    //color: #333;
		width:20%;
	    text-align: center;
		.left_head{
			//background-color: #42B983;
			height:25%;
			width:100%;
			.left_select{
				position: relative;
				      top: 50%;
				      transform: translateY(-50%);
			}
			
		}
		.left_middle1{
			height:30%;
			width:100%;
			//background-color:yellow;
			.left_middle_main{
				position: relative;
				      top: 50%;
				      transform: translateY(-50%);
			}
			
		}
		.left_middle2{
			height:30%;
			width:100%;
			//background-color:yellow;
			.left_middle_main{
				position: relative;
				      top: 50%;
				      transform: translateY(-50%);
			}
			
		}

		
	   // line-height: 60px;
	  }
	  .el-middle{
	    //background-color: #42B983;
	    //color: #333;
	    text-align: center;
		width:35%;
	   // line-height: 60px;
	   .middle_head{
	   	//background-color: #42B983;
	   	height:30%;
	   	width:100%;
	   	.middle_head_main{
	   		position: relative;
	   		      top: 50%;
	   		      //transform: translateY(-50%);
	   	}				
	   }
	   .middle_bottom{
	   //	background-color: #42B983;
	   	height:70%;
	   	width:100%;
	   	.middle_bottom_main{
	   		position: relative;
	   		      top: 50%;
	   		      transform: translateY(-50%);
	   	}
	   	
	   }
	  }
	  .el-right{
	    //background-color: #B3C333;
	    //color: #333;
	    text-align: center;
		width:35%;
	   // line-height: 60px;
			.right_head{
				//background-color: #42B983;
				height:30%;
				width:100%;
				.right_head_main{
					position: relative;
					      top: 50%;
					      transform: translateY(-50%);
				}				
			}
			.right_bottom{
				//background-color: #42B983;
				height:70%;
				width:100%;
				.right_bottom_main{
					position: relative;
					      top: 50%;
					      transform: translateY(-50%);
				}
				
			}
	  }
	  .alarmLabel{
		  font-size: 20px;
	  }
	  .alarmNum{
	  	font-size: 32px;
	  }
	  .subTitle{
		  font-size: 25px;
	  }
	  }
	
</style>
